<template>
  <div class="grid-content category-main">
    <el-divider content-position="center"/>
    <div class="user-info">
      <img src="@/assets/logo.png"/>
      <span>{{ name && name.length > 0 ? this.name : "未登录" }}</span>
      <el-button type="text" v-show="token" @click.native="logout">退出登录</el-button>
    </div>
    <ul class="infinite-list" v-infinite-scroll="load">
      <li v-for="(i) in noticeList" :key="i.id" @click="toAnnounce(i.id)">{{ i.title }}</li>
    </ul>
  </div>
</template>

<script>
import {noticeRestful} from '@/api/notice'

import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      noticeList: [],
      noticeInfo: {},
      paginationQuery: {
        currentPage: 1,
        pageSize: 10
      },
      count: 20
    }
  },
  created() {
    this.fetchNotices()
  },
  computed: {
    ...mapGetters([
      'name',
      'token'
    ]),
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    load() {
      this.paginationQuery.currentPage++
      this.fetchNotices()
    },
    toAnnounce(id) {
      this.$router.push({
        path: 'announce',
        query: {id},
      })
    },
    fetchNotices() {
      noticeRestful.fetchList(this.paginationQuery).then(({data, data: {records}}) => {
        this.noticeInfo = data;
        this.noticeList = this._.concat(this.noticeList, records);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.category-main {
  background-color: #fff;

  .el-divider:first-of-type {
    margin-top: 0;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.user-info::before,
.user-info::after {
  display: table;
  content: '';
}

.user-info::after {
  clear: both;
}

.user-info {
  width: 100%;
  height: 52px;
  text-align: left;
  border-bottom: 1px solid #e9eef3;

  img {
    width: 10%;
    margin-left: 30px;
    // float: left;
  }

  span {
    margin-left: 20px;
    vertical-align: middle;
  }

  .el-button {
    float: right;
    margin-right: 30px;
  }
}

.box-card {
  width: 100%;
  line-height: 30px;
}

.infinite-list {
  width: 100%;
  height: 360px;
  overflow: auto;
  // height: 100%;
  li {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9eef3;
    cursor: pointer;
  }
}
</style>
